<%@page import="net.sf.json.JSONObject"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <meta charset="UTF-8">
		<title>宿舍管理</title>
		<link rel="stylesheet" href="./layui/css/layui.css" />
		<script type="text/javascript" src="./layui/layui.js" ></script>
		<script type="text/javascript" src="./jquery-3.3.1/jquery-3.3.1.js" ></script>
		<script type="text/javascript" src="./jquery-3.3.1/jquery-3.3.1.min.js" ></script>
	</head>
	
	<body>
		<div class="layui-container">
				<div class="layui-row">
					<fieldset class="layui-elem-field layui-field-title">
						<legend>考勤查询</legend>
					</fieldset>
					<div class="layui-form" action="" lay-filter="selectAttForm">
						<div class="layui-form-item">
							<label class="layui-form-label">请输入学号</label>
							<div class="layui-input-inline">
								<input type="number" name="stuNub" id="stuNub" lay-verify="required|stunab" autocomplete="off" placeholder="请输入学生学号"  class="layui-input" />
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">输入宿舍号</label>
							<div class="layui-input-inline">
								<input type="number" name="DormNub" id="dormNub" lay-verify="required|pass"  autocomplete="off" placeholder="请输入宿舍号"  class="layui-input" />
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">请选择日期</label>
							<div class="layui-input-inline">
								 <input type="date" name="AttDate" class="layui-input" lay-verify="date" id="date" placeholder="yyyy-MM-dd">
							</div>
							<div class="layui-input-inline">
								<button lay-submit="" class="layui-btn" lay-filter="selectAttBtn" onclick="">查询</button>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-row layui-hide" id="row">
					<fieldset class="layui-elem-field layui-field-title">
						<legend>查询结果(ajax 请求数据库 返回值动态生产数据表格显示)</legend>
					</fieldset>
					<table class="layui-table">
						<thead>
							<tr>
								<th >考勤ID</th>
								<th >姓名</th>
								<th >学院</th>
								<th >专业</th>
								<th >班级</th>
								<th >宿舍</th>
								<th >请假记录</th>
								<th >请假时间</th>
								<th >晚归记录</th>
								<th >晚归时间</th>
								<th >未归</th>
								<th >备注</th>
								<th >操作</th>
							</tr>
						</thead>
						<tbody id="stuAttInfoTbody">
						
						</tbody>
					</table>
				</div>
		</div>
		<script type="text/javascript">
			layui.use(['laydate','form','jquery','layer','table'],function(){
				var laydate = layui.laydate;
				var form = layui.form;
				var table = layui.table;
				var $ = layui.jquery;
				var layer = layui.layer;
				//日期时间选择器
				 laydate.render({
					elem: '#date',
					format: 'yyyy-MM-dd'
				});	
				//监听提交
  				form.on('submit(selectAttBtn)', function(data){
  					var sNub = data.field.stuNub;
  					var dNub = data.field.DormNub
  					var attDate = data.field.AttDate;
  					getStuAtt(sNub,dNub,attDate);
    			
  				});
  				//编辑监听
  				$(document).on('click','#edit',function(){
					layer.open({
						type:2,
						title:'修改考勤信息',
						skin: 'layui-layer-rim', 
						 shade: 0.8,
						 anim:5,
						area: ['60%', '90%'], 
						content:'managerPage/editAttInfo.jsp',
						success:function(layero, index){
							console.log("layer success:"+layero,index);
						},
						end:function(index){
							var stuNub = $("#stuNub").val();
							var dormNub = $("#dormNub").val();
							var attDate = $("#date").val();
							console.log(stuNub+dormNub+attDate);
							getStuAtt(stuNub,dormNub,attDate);
						}
					});
				});
 				//表单验证
 				form.verify({
 					stunab: function(val , item){
 						if(val.length < 5 ){
 							return '学号长度不能少于5';
 						}
 					}	
 				});
			});
			function getStuAtt(sNub,dNub,attDate){
			console.log(attDate);
				$.ajax({
					type:"post",
					url:"selectAllAttForBuildNameServlet",
					async:true,
					data:{
						sNub:sNub,
						dNub:dNub,
						attDate:attDate
					},
					success : function(data){
					console.log(data.length);
					var allAttInfo = JSON.parse(data);
					if(data.length > 2){
							$.each(allAttInfo,function(index,item){
							//console.log("item:"+item+"index:"+index)	
								var tr;
								tr ='<td>'+item.AttId+'</td>'+ '<td>'+item.name+'</td>'+'<td>'+item.College+'</td>'+'<td>'+item.major+'</td>'+'<td>'+item.tClass+'</td>'+'<td>'+item.dNub+'</td>'
								+'<td>'+item.Is_leave+'</td>'+'<td>'+item.Time_for_leave+'</td>'+'<td>'+item.Stay_out_late+'</td>'+'<td>'+item.Late_return_time+'</td>'+'<td>'+item.No_return+'</td>'
								+'<td>'+item.remarks+'</td>'
								+'<td><a class="layui-btn layui-btn-xs" id="edit" lay-event="edit">编辑</a></td>';
								layer.msg('已查询');
								$("#row").removeClass("layui-hide");
								$("table tbody tr").empty();
								$("#row blockquote").remove();
								$("#stuAttInfoTbody").append('<tr>'+tr+'</tr>');
							});
						}else{
							layer.msg('已查询');
							$("#row").removeClass("layui-hide");
							$("table tbody tr").empty();
							$("#row blockquote").remove();
							$("#row").append('<blockquote class="layui-elem-quote layui-quote-nm">请确定个人信息是否正确，本楼栋无此人考勤记录！</blockquote>');
						}
					},
					error :function(e){
						alert("错误！！");
					}
				});
			};
		</script>
		
	
	</body>
</html>
